<template>
	<view class="home">
		<view class="share-monney">
			<view class="cans">
				<canvas :style="'width:'+ img_w +'px;height:'+ img_h +'px'" canvas-id="firstCanvas"
					id="firstCanvas"></canvas>
			</view>
		</view>
		<u-navbar style="z-index: 9999;" :placeholder="true" :bgColor="navBackgroundTop">
			<view class="u-nav-slot" slot="left">
				<view class="df df-align-items">
					<text
						style="font-weight: bold; color: #fff;margin-left: 40rpx; margin-right: 8rpx; font-size: 38rpx;">交油通</text>
					<!-- <view class="df df-flex-direction-column df-justify-content" style="font-size: 24rpx; color: #fff;">
						<text>加油保险找车派</text>
						<text>品质实惠天天在</text>
					</view> -->
				</view>
			</view>
		</u-navbar>
		<view class="home_top" :style="{position: 'relative',zIndex: 9, background: navBackground}">
			<view class="home_search">
				<u-search placeholder='请输入油站名称' :showAction="true" actionText="搜索" :animation="true" v-model="keyword"
					@search='search' @custom='custom'></u-search>
			</view>
			<view class="home-banner w-center">
				<swiper class="swiper" :indicator-dots="true" indicator-color="rgba(255,255,255,.5)"
					indicator-active-color="#ffffff" @change="changeSwiper">
					<swiper-item class="swiper-item" v-for="(item,index) in banner" :key="index">
						<view class="">
							<image :src="IMG_URL+item.image" mode="aspectFill" style="width: 100%;height: 280rpx;">
							</image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="w-center adver df df-justify-content-between">
				<view class="df df-justify-content-between df-align-items" v-for="(item,index) in nav" :key="index">
					<!--  #ifdef MP-ALIPAY -->
					<view class="adver-item  df df-justify-content-between df-align-items" @click="toIns"
						v-if="item.name === '渠道补贴'">
						<text>{{item.name}}</text>
						<image :src="item.icon" mode="aspectFill">
						</image>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<navigator class='miniprogram-btn' target="miniProgram" open-type='navigate'
						app-id='wx196627359c41617b' path='pages/home/index' v-if="item.name === '渠道补贴'">
						<view class="adver-item  df df-justify-content-between df-align-items">
							<text>{{item.name}}</text>
							<image :src="item.icon" mode="aspectFill">
							</image>
						</view>
					</navigator>
					<!-- #endif -->
					<view class="" v-else>
						<view class="adver-item df df-justify-content-between df-align-items" @click="_initCanvas"
							v-if='item.name === "渠道分享"'>
							<text>{{item.name}}</text>
							<image :src="item.icon" mode="aspectFill">
							</image>
						</view>
						<view class="adver-item df df-justify-content-between df-align-items"
							@click="$navigateTo(item.url)" v-else>
							<text>{{item.name}}</text>
							<image :src="item.icon" mode="aspectFill">
							</image>
						</view>
					</view>
				</view>
				<!-- <view class="adver-item" v-for="(item,index) in nav" :key="index" @click="$navigateTo(item.url)">
					<image :src="item.icon" mode="aspectFill">
						<view class="text">{{item.name}}</view>
					</image>
				</view> -->
				<!-- <view class="adver-item share" @click="shareChoose">
					<image src="/static/home/icon_3.png" mode="aspectFill">
						<view class="text">分享领红包</view>
						<button id="shareBtn" open-type="share"></button>
					</image>
				</view> -->
			</view>
		</view>
		<view class="gay-box"></view>
		<!-- <view class="active_region df df-justify-content" :style="{height: actvieBox}" @click="$navigateTo('/pages/active/doubleEleven')">
			<view class="active_contnet">
				<image :src="IMG_URL+windowImg" mode="aspectFill"></image>
			</view>
		</view> -->
		<!-- <view class="gay-box"></view> -->
		<view class="check-list">
			<view>
				<view class="check-list-in df">
					<block v-for="(items,indexs) in screen" :key="indexs">
						<view class="check-list-item df df-align-items" @click="handleSel(items)">
							<view>{{items.name}}</view>
							<text class="iconfont icon-shangjiantou" v-if="items.check"></text>
							<text class="iconfont icon-shangjiantou-copy" v-else></text>
						</view>
						<!--距离-->
						<view class="prop" v-if="screen[sel_index].check && sel_index == 0">
							<view class="distance-box w-center df df-justify-content-between df-flex-wrap">
								<block v-for="(item,index) in distance" :key="index">
									<view
										:class="d_index == item.val? 'ab-box act-item df df-justify-content-alin' : 'ab-box df df-justify-content-alin'"
										@click="checkDistance(item)">{{item.name}}</view>
								</block>
								<view class="ab-box2" v-if="distance.length % 4 !== 0"
									v-for="(item) in (4 -distance.length % 4)" :key="item"></view>
							</view>
						</view>
						<!--油号-->
						<view class="prop" v-if="screen[sel_index].check && sel_index == 1">
							<view class="distance-box w-center df df-justify-content-between df-flex-wrap">
								<block v-for="(item,index) in oil_type" :key="index">
									<view
										:class="o_index == item.id? 'ab-box act-item df df-justify-content-alin' : 'ab-box df df-justify-content-alin'"
										@click="checkOilType(item)">{{item.name}}</view>
								</block>
								<view class="ab-box2" v-if="oil_type.length % 4 !== 0"
									v-for="(item) in (4 -oil_type.length % 4)" :key="item"></view>
							</view>
						</view>
						<!--排序-->
						<view class="prop" v-if="screen[sel_index].check && sel_index == 2">
							<view class="distance-box w-center df">
								<block v-for="(item,index) in sort" :key="index">
									<view
										:class="s_index == item.val? 'ab-box act-item df df-justify-content-alin' : 'ab-box df df-justify-content-alin'"
										style="margin-right: 40rpx;" @click="checkSort(item)">{{item.name}}</view>
								</block>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="w-center-p">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption">
				<block v-for="(item,index) in list" :key="index">
					<oil-item :oil="item" :index="index" :oiltype="o_index" :hide_col="false"></oil-item>
				</block>
				<mescroll-empty v-if="list.length==0"></mescroll-empty>
			</mescroll-body>
		</view>

		<!-- #ifdef MP-ALIPAY -->
		<view class="mask-popup">
			<Popup ref="prop" :mask-click="false">
			</Popup>
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<Popup ref="prop" :mask-click="false">
		</Popup>
		<!-- #endif -->

		<!-- 轮播海报 -->
		<poster v-if="imageList != ''" class="poster" :image-list="imageList" ref="poster" :IMG_URL="IMG_URL"></poster>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import OilItem from '@/components/oil-item/oil-item.vue'
	//import privacyAuth from '@/components/privacy-auth/privacy-auth.vue'
	import api from '@/api/home.js'
	import mApi from '@/api/mine.js'
	import sapi from '@/api/share.js'
	import Popup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
	import url from '@/config/config.js'
	import poster from "@/components/home-poster/poster.vue";
	import share from '@/commom/js/share.js'
	import parseHtml from "@/utils/html-parser.js";
	import amap from "@/commom/js/amap-wx.130.js"
	// Vue.mixin(share)
	import {
		nextTick
	} from "vue";
	export default {
		mixins: [MescrollMixin],
		components: {
			OilItem,
			Popup,
			poster
			//privacyAuth,
		},
		data() {
			return {
				plat_name:'加油保小程序',
				treaty_name:'',//
				c_time: 5, //点击效果时间
				l_time: 60, //点击效果持续时间
				navBackground: '',
				navBackgroundTop: '#FFF',
				keyword: "", //搜索关键词
				downOption: {
					use: true, // 开启下拉刷新
					auto: false
				},
				upOption: {
					use: true,
					// onScroll: true,
					// auto: true,
					auto: true,
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 15, // 每页数据的数量
						time: 100 // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
					},
					empty: {
						use: false, // 是否显示空布局
						icon: "https://www.mescroll.com/img/mescroll-empty.png", // 图标路径
						tip: '~ 暂无相关数据 ~', // 提示
						btnText: '去逛逛 >', // 按钮
						fixed: false, // 是否使用fixed定位,默认false; 配置fixed为true,以下的top和zIndex才生效 (transform会使fixed失效,最终会降级为absolute)
						top: "100rpx", // fixed定位的top值 (完整的单位值,如 "10%"; "100rpx")
						zIndex: 99 // fixed定位z-index值
					}
				},
				// nav: [{
				// 		id: 0,
				// 		name: '赚现金',
				// 		icon: require('@/static/home/icon_4.png'),
				// 		url: '/pages/share-money/share-money'
				// 	},
				// 	{
				// 		id: 1,
				// 		name: '车辆认证',
				// 		icon: require('@/static/home/icon_2.png'),
				// 		url: '/pages/home/owner/owner'
				// 	},
				// 	{
				// 		id: 2,
				// 		name: '优惠券',
				// 		icon: require('@/static/home/icon_1.png'),
				// 		url: '/pages/mine/coupon/coupon'
				// 	}
				// ],
				nav: [{
						id: 0,
						name: '赚现金',
						icon: require('@/static/home/zq.gif'),
						url: '/pages/share-money/share-money'
					},
					{
						id: 1,
						name: '车辆认证',
						icon: require('@/static/home/rz.gif'),
						url: '/pages/home/owner/owner'
					}
				],
				sel_index: 0,
				screen: [{
						id: 0,
						name: '50km内',
						check: false
					},
					{
						id: 1,
						name: '油号',
						check: false
					},
					{
						id: 2,
						name: '智能排序',
						check: false
					}
				],
				d_index: 50000, //距离
				o_index: '', //油号
				s_index: 0, //排序
				//距离
				distance: [{
						id: 0,
						name: '6km内',
						val: 6000
					},
					{
						id: 1,
						name: '10km内',
						val: 10000
					},
					{
						id: 2,
						name: '15km内',
						val: 15000
					},
					{
						id: 3,
						name: '20km内',
						val: 20000
					},
					{
						id: 4,
						name: '50km内',
						val: 50000
					},
					{
						id: 5,
						name: '不限',
						val: ''
					}
				],
				//油号
				oil_type: [],
				//排序
				sort: [{
						id: 0,
						name: '智能排序',
						val: ''
					},
					{
						id: 1,
						name: '距离优先',
						val: 'distance'
					},
					{
						id: 2,
						name: '价格优先',
						val: 'price'
					},
				],
				form: {
					lng: '',
					lat: '',
					oil_type_id: '',
					orderFiled: '',
					page: 1
				},
				list: [],
				banner: [], //banner
				IMG_URL: '',
				longitude: '', //经度
				latitude: '', //纬度
				imageList: '', // 海报
				windowHeight: '', //手机屏幕可用高度
				actvieBox: '', //橱窗柜的高度
				homeTop: '', // class为home_top盒子的高度
				checkListIn: '', // 筛选框盒子的高度
				windowImg: '', // 橱窗柜活动图片
				homeImage: '',
				ewm: '',
				detail: '',
				can_bg: '/static/home/share-bg-1.png',
				screenW: '',
				screenH: '',
				img_w: '',
				img_h: '',
				local_ewm: '',
				ewm_W: '',
				ewm_h: '',
				list: [],
				IMG_URL: '',
				loading: false,
				page: 1,
				last_page: 0,
				total: 0,
				nowEwm: '',
				ins_group_id: '', //渠道端用户等级
				mobile: '', //用户手机号
				province: '', //用户所在地
			//	key: '92c814b998137595c3391cb08c4303ff' //高德地图key
			}
		},
		onLoad(options) {
			
			// this.getPopupDataApi()
			uni.setStorageSync('promoter_id', null);
			let _this = this;
			this.IMG_URL = this.$IMG_URL;
			// this.getStationList()
			this.getBanner()
			this.getOilType()
			this.getWindowBanner()
			// this.getHomeImage()
			// this.getErcode()
			// this.getNowCode()
			uni.getSystemInfo({
				success: (res) => {
					this.screenW = res.screenWidth
					this.screenH = res.screenHeight
				}
			})
			
			if (!uni.getStorageSync('userinfo').token) {
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
				this.getIsRegister();
			} else {
				//console.log(uni.getStorageSync('userinfo').token, "111");
				this.token = uni.getStorageSync('userinfo').token;
				this.getGiveInsure();
				this.getUserInfo();
			}
			// 开屏页面定位后，携带经纬度进入首页
			if (options.longitude && options.latitude) {
				// 开屏页面，定位成功
				this.longitude = options.longitude, //经度
					this.latitude = options.latitude, //纬度
					
				this.list = [];
			} else {
				// 开屏页面，定位失败
				this.getLoacl();
			};

			if (options && options.scene) {
				uni.setStorageSync('userDistCode', options.scene);
				if (!uni.getStorageSync('userinfo').token) {
					this.getIsRegister();
				} else {
					this.getInsBinding()
				}
			}
			if (options && options.invite) {
				uni.setStorageSync('userDistCode', options.invite);
				if (!uni.getStorageSync('userinfo').token) {
					this.getIsRegister();
				} else {
					this.getInsBinding()
				}
			}
			let launchOpt = uni.getLaunchOptionsSync();
			if (launchOpt.query && launchOpt.query.scene != null) {
				uni.setStorageSync('userDistCode', launchOpt.query.scene);
				// console.log(uni.getStorageSync('userDistCode'), "首页接受的邀请码");
				// if(launchOpt.query.scene){
				if (!uni.getStorageSync('userinfo').token) {
					this.getIsRegister();
				} else {
					this.getInsBinding()
				}
				// }
				let scene = launchOpt.query.scene.split('-');
				if (scene.length != undefined) {
					uni.setStorageSync('promoter_id', scene[0]);
				}
			}
			if (launchOpt.query && launchOpt.query.invite != null) {
				uni.setStorageSync('userDistCode', launchOpt.query.invite);
				if (!uni.getStorageSync('userinfo').token) {
					this.getIsRegister()
				} else {
					this.getInsBinding()
				}
				let invite = launchOpt.query.invite.split('-');
				if (invite.length != undefined) {
					uni.setStorageSync('promoter_id', invite[0]);
				}
			}
		},
		mounted() {
			 
			
			// this.$refs.poster.open();

			// if(this.keyword == ''){
			this.mescroll.resetUpScroll();
			// }
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		onHide() {
			// this.$refs.poster.close();
		},
		created() {
			this.getActivityPoster();
		},
		computed: {
			canH() {
				return parseInt((this.img_h * this.screenW) / this.img_h)
			}
		},
		onTabItemTap() {
			// #ifndef MP-ALIPAY
			uni.authorize({
				scope: 'scope.userLocation',
				success: (adds) => {
					// #endif
					// this.getLoacl()
					uni.getLocation({
						// #ifndef MP-ALIPAY
						type: 'gcj02',
						// #endif
						success: (result) => {
							if (result.errMsg == 'getLocation:ok') {
								this.longitude = result.longitude
								this.latitude = result.latitude
								let address = {
									longitude: result.longitude,
									latitude: result.latitude
								}
								uni.setStorageSync('address', address);
							}
						},
						complete: (ar) => {},
						fail: (err) => {
							// #ifndef MP-ALIPAY
							uni.showModal({
								title: '未开启手机GPS',
								content: `请打开手机GPS定位权限（屏幕下拉中的位置权限）`,
								//showCancel: false,
								confirmText: '刷新',
								cancelText: '取消',
								success: (res) => {
									console.log(res,111)
									if (res.confirm) {
										this.getLoacl();
									}else{
										this.longitude = 116.456270;
										this.latitude = 39.919990;
										//console.log(this.longitude);
										this.d_index = '';
										this.mescroll.resetUpScroll();
										this.screen[0].name = '不限';
									}
								}
							});
							// #endif
							// #ifdef MP-ALIPAY
							uni.showModal({
								title: '提示',
								content: '请打开 “手机定位权限” 和授权 “支付宝位置” ,获取附近的加油站!',
								// showCancel: false,
								confirmText: '我已授权',
								cancelText: '取消',
								success: (res) => {
									console.log(res)
									if (res.confirm) {
										this.getLoacl();
									}else{
										this.longitude = 116.456270;
										this.latitude = 39.919990;
										console.log(this.longitude);
										this.d_index = '';
										this.mescroll.resetUpScroll();
										this.screen[0].name = '不限';
									}
								}
							});
							// #endif
						}
					})
					// #ifndef MP-ALIPAY
				},
				fail: () => {
					uni.showModal({
						title: '提示',
						content: '请打开定位权限！',
						success: (rs) => {
							if (rs.confirm) {
								uni.openSetting({
									success: () => {}
								})
							}
						}
					});
				}
			})
			// #endif
		},
		onShow() {
			
		},
		methods: {
			getIsRegister(){
				// #ifdef MP-WEIXIN
				uni.login({
				        provider: "weixin",
				        success: (wxInfo) => {
				          // 获取到code后，提交给服务端
						  mApi.appletLogin( {
				            code: wxInfo.code,
				          }).then(res => {
							  if(res.data.is_register==1){
								  uni.setStorage({ key: 'is_register',data:res.data.is_register	})
								  uni.setStorage({ key: 'userinfo',data: { token: res.data.userinfo.token} })
							  }else{
								  uni.setStorage({ key: 'is_register',data:0	})
								  uni.setStorage({ key: 'userinfo',data: { token: res.data.userinfo.token} })
							  }
							 
						  })
						  
				        },
				});
				// #endif
			},
			toIns() {
				my.navigateToMiniProgram({
					appId: '2021003191622049',
					path: "pages/home/index",
					// extraData: {
					//   "channel": "来源标识",
					//   "retcode": "业务推广码"
					// },
					success: (res) => {
						console.log(JSON.stringify(res))
					},
					fail: (res) => {
						console.log(JSON.stringify(res))
					}
				});
			},
			custom() {
				this.mescroll.resetUpScroll();
			},
			search() {
				this.mescroll.resetUpScroll();
			},
			// 获取拉新页面背景图和拉新海报图
			getActivityPoster() {
				let _this = this;
				sapi.activityPoster().then(res => {
					if (res.code == 1) {
						// 设置导航栏背景色
						this.$nextTick(() => {
							uni.setNavigationBarColor({
								frontColor: "#ffffff",
								backgroundColor: res.data.theme_color ? res.data.theme_color :
									"#FE7F24",
								success() {},
								fail(err) {
									// console.log(err);
								}
							});
						});

						let data = JSON.parse(JSON.stringify(res.data));
						if (data.backdrop_img) {
							data.backdrop_img = this.$IMG_URL + data.backdrop_img + "";
						};
						uni.getImageInfo({
							src: _this.can_bg,
							success: (image) => {
								// console.log(image,'图片信息')
								_this.img_w = image.width;
								_this.img_h = image.height;
							}
						});
						this.invitaInfo = data;
					} else {
						uni.getImageInfo({
							src: _this.can_bg,
							success: (image) => {
								// console.log(image,'图片信息')
								_this.img_w = image.width;
								_this.img_h = image.height;
							}
						});

						// 设置导航栏背景色
						this.$nextTick(() => {
							uni.setNavigationBarColor({
								frontColor: "#ffffff",
								backgroundColor: "#FE7F24",
								success() {},
								fail(err) {}
							});
						});
					};
				});
			},
			getErcode() {
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '加载中…'
				})
				api.getAppletCode().then(res => {
					if (res.code == 1) {
						this.ewm = res.data.path;
						uni.downloadFile({
							url: res.data.path,
							success: (e) => {
								const p = e.tempFilePath
								if (e.errMsg == 'downloadFile:ok') {
									uni.getImageInfo({
										src: p,
										success: (image) => {
											uni.hideLoading()
											// console.log(image, '图片信息')
											_this.ewm_W = image.width
											_this.ewm_h = image.height
										}
									})
									_this.local_ewm = p
									//console.log('图片url', _this.local_ewm)
									// uni.hideLoading()
								}
								// console.log('二二', e)
							},
							fail: (r) => {
								uni.hideLoading()
							}
						})
					}
					// console.log(this.$IMG_URL)
				})
				// #endif

				// #ifdef MP-ALIPAY
				api.getAliInsQrcode().then(res => {
					if (res.code == 1) {
						this.ewm = res.data.fullpath;
						uni.downloadFile({
							url: res.data.fullpath,
							success: (e) => {
								const p = e.tempFilePath
								if (e.errMsg == 'downloadFile:ok') {
									uni.getImageInfo({
										src: p,
										success: (image) => {
											uni.hideLoading()
											// console.log(image, '图片信息')
											_this.ewm_W = image.width
											_this.ewm_h = image.height
										}
									})
									_this.local_ewm = p
									console.log('图片url', _this.local_ewm)
									// uni.hideLoading()
								}
								// console.log('二二', e)
							},
							fail: (r) => {
								uni.hideLoading()
							}
						})
					}
					// console.log(this.$IMG_URL)
				})
				// #endif
			},
			_initCanvas() {
				// this.getNowCode(); //获取二维码
				// this.getErcode();
				let _this = this;
				// #ifdef MP-WEIXIN
				uni.showLoading({
					title: '加载中…'
				})
				api.getAppletCode().then(res => {
					uni.showLoading({
						title: '生成中…'
					});
					if (res.code == 1) {
						this.ewm = res.data.path;
						uni.downloadFile({
							url: res.data.path,
							success: (e) => {
								const p = e.tempFilePath
								if (e.errMsg == 'downloadFile:ok') {
									uni.getImageInfo({
										src: p,
										success: (image) => {
											uni.hideLoading()
											// console.log(image, '图片信息')
											_this.ewm_W = image.width
											_this.ewm_h = image.height
										}
									})
									_this.local_ewm = p
									console.log('图片url', _this.local_ewm)
									if (this.ins_group_id == 4) {
										uni.showToast({
											icon: "error",
											title: "您没有权限分享"
										})
									} else {
										if (this.ewm) {
											let _this = this;
											var ctx = uni.createCanvasContext('firstCanvas', this);
											ctx.drawImage(_this.can_bg, 0, 0, _this.img_w, _this.img_h);
											ctx.drawImage(_this.local_ewm, _this.img_w * 0.1, 10, _this.img_w * 0.8,
												_this.img_w * 0.8);
											ctx.setFontSize(16);
											ctx.fillText(_this.mobile.substr(0, 3) + '****' + _this.mobile.substr(_this.mobile.length - 4), 10,
												_this.img_w * 0.92);
											ctx.fillText('加油保渠道注册', 10, _this.img_w * 1.0);
											ctx.fillText('长按或扫描识别二维码', 10, _this.img_w * 1.09);
											ctx.draw(false, res => {
												// #ifndef MP-ALIPAY
												if (res.errMsg == 'drawCanvas:ok') {
													// #endif
													setTimeout(() => {
														uni.hideLoading()
														uni.canvasToTempFilePath({
															canvasId: 'firstCanvas',
															success: function(rs) {
																var tempFilePath = rs.tempFilePath;
																if (rs) {
																	// 微信图片预览
																	// #ifndef MP-ALIPAY
																	uni.previewImage({
																		urls: [tempFilePath],
																		longPressActions: {
																			itemList: ['发送给朋友', '保存图片',
																				'收藏'
																			],
																			success: function(data) {},
																			fail: function(err) {
																				// console.log(err.errMsg);
																			}
																		}
																	});
																	// #endif
																	// 支付宝图片预览
																	// #ifdef MP-ALIPAY
																	my.previewImage({
																		urls: [tempFilePath],
																		enablesavephoto: true, // 长按下载
																		enableShowPhotoDownload: true, // 右下角显示下载入口
																		success: (res) => {},
																		fail: (error) => {
																			my.alert({
																				content: 'fail回调' +
																					JSON
																					.stringify(
																						error)
																			});
																		},
																	});
																	// #endif
																}
																// console.log(tempFilePath);
																uni.hideLoading()
															},
															fail: function(res) {
																uni.hideLoading()
																uni.showToast({
																	title: '绘制失败！',
																	icon: "none",
																	duration: 1000
																})
																// console.log(res);
															}
														})
													}, 500)
													// #ifndef MP-ALIPAY
												}
												// #endif
											})
										}
										// console.log(ctx, '画布')
									}
									// uni.hideLoading()
								}
								// console.log('二二', e)
							},
							fail: (r) => {
								uni.hideLoading()
							}
						})
					}
					// console.log(this.$IMG_URL)
				})
				// #endif
				
				// #ifdef MP-ALIPAY
				uni.showLoading({
					title: '加载中…'
				})
				api.getAliInsQrcode().then(res => {
					if (res.code == 1) {
						uni.showLoading({
							title: '生成中…'
						});
						this.ewm = res.data.fullpath;
						uni.downloadFile({
							url: res.data.fullpath,
							success: (e) => {
								const p = e.tempFilePath
								if (e.errMsg == 'downloadFile:ok') {
									uni.getImageInfo({
										src: p,
										success: (image) => {
											uni.hideLoading()
											// console.log(image, '图片信息')
											_this.ewm_W = image.width
											_this.ewm_h = image.height
										}
									})
									_this.local_ewm = p
									//console.log('图片url', _this.local_ewm)
									if (this.ins_group_id == 4) {
										uni.showToast({
											icon: "error",
											title: "您没有权限分享"
										})
									} else {
										
										if (this.ewm) {
											let _this = this;
											var ctx = uni.createCanvasContext('firstCanvas', this);
											ctx.drawImage(_this.can_bg, 0, 0, _this.img_w, _this.img_h);
											ctx.drawImage(_this.local_ewm, _this.img_w * 0.1, 10, _this.img_w * 0.8,
												_this.img_w * 0.8);
											ctx.setFontSize(16);
											ctx.fillText(_this.mobile.substr(0, 3) + '****' + _this.mobile.substr(_this.mobile.length - 4), 10,
												_this.img_w * 0.92);
											ctx.fillText('加油保渠道注册', 10, _this.img_w * 1.0);
											ctx.fillText('长按或扫描识别二维码', 10, _this.img_w * 1.09);
											ctx.draw(false, res => {
												// #ifndef MP-ALIPAY
												if (res.errMsg == 'drawCanvas:ok') {
													// #endif
													setTimeout(() => {
														uni.hideLoading()
														uni.canvasToTempFilePath({
															canvasId: 'firstCanvas',
															success: function(rs) {
																var tempFilePath = rs.tempFilePath;
																if (rs) {
																	// 微信图片预览
																	// #ifndef MP-ALIPAY
																	uni.previewImage({
																		urls: [tempFilePath],
																		longPressActions: {
																			itemList: ['发送给朋友', '保存图片',
																				'收藏'
																			],
																			success: function(data) {},
																			fail: function(err) {
																				// console.log(err.errMsg);
																			}
																		}
																	});
																	// #endif
																	// 支付宝图片预览
																	// #ifdef MP-ALIPAY
																	my.previewImage({
																		urls: [tempFilePath],
																		enablesavephoto: true, // 长按下载
																		enableShowPhotoDownload: true, // 右下角显示下载入口
																		success: (res) => {},
																		fail: (error) => {
																			my.alert({
																				content: 'fail回调' +
																					JSON
																					.stringify(
																						error)
																			});
																		},
																	});
																	// #endif
																}
																// console.log(tempFilePath);
																uni.hideLoading()
															},
															fail: function(res) {
																uni.hideLoading()
																uni.showToast({
																	title: '绘制失败！',
																	icon: "none",
																	duration: 1000
																})
																// console.log(res);
															}
														})
													}, 500)
													// #ifndef MP-ALIPAY
												}
												// #endif
											})
										}
										// console.log(ctx, '画布')
									}
									// uni.hideLoading()
								}
								// console.log('二二', e)
							},
							fail: (r) => {
								uni.hideLoading()
							}
						})
					}
					// console.log(this.$IMG_URL)
				})
				// #endif
				
			},
			getNowCode() {
				api.getAppletCode().then(res => {
					uni.setStorageSync('userEwm', res.data.path);
					this.nowEwm = uni.setStorageSync('userEwm');
				})
			},
			getUserInfo() {
				mApi.getUserInfo().then(res => {
					if (res.code == 1) {
						if (!res.data.ins_group_id) {
							console.log("不是渠道用户");
						} else {
							this.ins_group_id = res.data.ins_group_id
							this.nav[1].name = '渠道补贴';
							this.nav[0].name = '渠道分享';
							this.mobile = res.data.mobile;
							this.getNowCode(); //获取二维码
						}
						// console.log(this.set_list[0].show);
					}
				});
			},
			shareChoose() {
				// this.$refs.prop1.open();
			},
			// cancel() {
			// 	this.$refs.prop1.close();
			// },
			// shareRoll() {

			// },
			reload() {
				// this.list = [];
				// 页面重载
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
				// 执行刷新
			},
			getInsBinding() {
				api.getInsBinding({
					token: this.token,
					invite: uni.getStorageSync('userDistCode')
				}).then(res => {
					if (res.code == 1) {
						//console.log(111);
						this.getUserInfo();
					}
				})
			},
			getGiveInsure() {
				api.getGiveInsure({
					token: this.token
				}).then(res => {
					if (res.code == 1) {
						//console.log(111);
					}
				})
			},
			changeSwiper(e) {
				this.setBannerBackground(254, 96, 112);
				// let image = this.IMG_URL + this.banner[e.detail.current].image
				// this.getImageInfo(image, e.detail.current)
			},

			// getImageInfo(path, index) {

			// 	return new Promise( (resolve, reject) => {
			// 		 uni.getImageInfo({
			// 			src: path,
			// 			success: (res) => {
			// 				var ctx = uni.createCanvasContext('canvas',this)

			// 				ctx.setFillStyle('red')
			// 				ctx.fillRect(0, 0,  res.width, res.height)

			// 				// 填充背景色，白色
			// 				ctx.drawImage(res.path, 0, 0, res.width, res.height) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)

			// 				console.log({
			// 					canvasId: ctx.canvasId,
			// 					x: 0,
			// 					y: 0,
			// 					width: res.width,
			// 					height: res.height,
			// 				})

			// 				ctx.draw(false, () => {
			// 					console.log('draw done bg')
			// 				});

			// 				 uni.canvasGetImageData({
			// 					canvasId: ctx.canvasId,
			// 					x: 0,
			// 					y: 0,
			// 					width: res.width,
			// 					height: res.height,
			// 					success: (res) => {
			// 						console.log(res)
			// 						let imgData = res.data;
			// 						var r = 0,
			// 							g = 0,
			// 							b = 0,
			// 							a = 0;

			// 						for (var i = 0; i < imgData.length; i += 4) {
			// 							r += imgData[i];
			// 							g += imgData[i + 1];
			// 							b += imgData[i + 2];
			// 							a += imgData[i + 3];
			// 						}
			// 						//点阵数量
			// 						let pixels=res.height*res.width;
			// 						console.log(r,g,b,pixels)
			// 						// 求取平均值
			// 						r /= pixels;
			// 						g /= pixels;
			// 						b /= pixels;
			// 						// 将最终的值取整
			// 						r = Math.round(r);
			// 						g = Math.round(g);
			// 						b = Math.round(b);

			// 						this.setBannerBackground(r,g,b);
			// 					},
			// 					fail: (fail) => {
			// 						console.log('未绘制')
			// 						reject(fail)
			// 					},
			// 					complete: (res) => {
			// 						console.log(res)
			// 					}
			// 				})
			// 			}
			// 		})
			// 	})

			// },
			// 设置头部背景
			setBannerBackground(r, g, b) {
				const linearGradientColor1 =
					`rgba(${r},${g},${b},1)`;
				const linearGradientColor2 =
					`rgba(${r},${g},${b},0.1)`;
				this.navBackground = `linear-gradient(${linearGradientColor1},${linearGradientColor2})`;
				this.navBackgroundTop = linearGradientColor1;
			},
			// 动态获取活动区高度
			getActiveHeight() {
				let _this = this
				uni.getSystemInfo({
					success: (res) => {
						this.windowHeight = res.windowHeight
					}
				})
				let view = uni.createSelectorQuery().select(".home_top");
				view.boundingClientRect(data => {
					this.homeTop = data.height
					let view2 = uni.createSelectorQuery().select(".check-list-in");
					view2.boundingClientRect(data => {
						_this.checkListIn = data.height
						_this.actvieBox = (_this.windowHeight - _this.checkListIn - _this.homeTop - 140) *
							2 + 'rpx'
					}).exec()
				}).exec()
			},
			// 定位
			getLoacl() {
				//console.log('home_11111')
				uni.getLocation({
					// #ifndef MP-ALIPAY
					type: 'gcj02',
					// #endif
					success: (result) => {
						//console.log(result)
						if (result.errMsg == 'getLocation:ok') {
							this.longitude = result.longitude
							this.latitude = result.latitude
							let address = {
								longitude: result.longitude,
								latitude: result.latitude
							}
							uni.setStorageSync('address', address)
							// let key = '0de28d98708412623729165ecd374af0'; //高德地图key
							// uni.request({
							// 	url: 'https://restapi.amap.com/v3/geocode/regeo?location=' +
							// 		this.longitude + ',' + this.latitude + '&key=' + this.key,
							// 	success: (res) => {
							// 		this.province = res.data.regeocode.addressComponent.province;
							// 		// console.log(this.province);
							// 		uni.setStorageSync('province', res.data.regeocode
							// 			.addressComponent);
							// 		// console.log(uni.getStorageSync('province'),"地址");
							// 		// console.log(res.data.regeocode);
							// 	},
							// 	fail: (error) => {
							// 		uni.showToast({
							// 			title: "获取位置信息失败",
							// 			icon: "none"
							// 		});
							// 	}
							// })
							this.list = []
							this.mescroll.resetUpScroll()
						}
					},
					complete: (ar) => {
						// console.log(ar, '定位情况')
					},
					fail: (err) => {
						// #ifndef MP-ALIPAY
						uni.showModal({
							title: '未开启手机GPS',
							content: `请打开手机GPS定位权限（屏幕下拉中的位置权限）`,
							//showCancel: false,
							confirmText: '刷新',
							cancelText: '取消',
							success: (res) => {
								console.log(res,'2222')
								if (res.confirm) {
									this.getLoacl();
								}else{
									this.longitude = 116.456270;
									this.latitude = 39.919990;
									//console.log(this.longitude);
									this.d_index = '';
									this.mescroll.resetUpScroll();
									this.screen[0].name = '不限';
								}
							}
						});
						// #endif
						// #ifdef MP-ALIPAY
						uni.showModal({
							title: '提示',
							content: '请打开 “手机定位权限” 和授权 “支付宝位置” ,获取附近的加油站!',
							// showCancel: false,
							confirmText: '我已授权',
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									this.getLoacl();
								} else {
									this.mescroll.resetUpScroll()
								};
							}
						});
						// #endif
					}
				})
				//uni.setStorageSync('province', this.province);
				//console.log(uni.setStorageSync('province'));
			},
			//筛选用到得公共代码
			pubAction(item) {
				this.screen[this.sel_index].name = item.name
				this.screen[this.sel_index].check = false
				this.list = []
				this.mescroll.resetUpScroll()
				this.$refs.prop.close();
			},
			//切换距离
			checkDistance(item) {
				this.d_index = item.val
				this.pubAction(item)
			},
			//切换油号
			checkOilType(item) {
				this.o_index = item.id
				this.pubAction(item)
			},
			//切换排序规则
			checkSort(item) {
				this.s_index = item.val
				this.pubAction(item)
			},
			//获取所有油型
			getOilType() {
				api.getOilType().then(res => {
					if (res.code == 1) {
						this.oil_type = res.data
					}
				})
			},
			//筛选切换
			handleSel(item) {
				this.sel_index = item.id;
				for (let i in this.screen) {
					if (item.id == i) {
						this.screen[i].check = !this.screen[item.id].check;
					} else {
						this.screen[i].check = false;
					}
				}
				if (this.screen[item.id].check) {
					this.$refs.prop.open()
				} else {
					this.$refs.prop.close();
				}
			},
			getStationList() {
				let clone = JSON.parse(JSON.stringify(this.form))
				console.log(clone,8888888);
				api.getStationList(clone).then(res => {
					this.list = res.data.data;
				})
			},
			getBanner() {
				api.getBanner({
					action_type: 0
				}).then(res => {
					this.banner = res.data;
					let image = this.IMG_URL + this.banner[0].image
					// this.getImageInfo(image, 0)
					this.setBannerBackground(254, 96, 112);
				})
			},
			// 开屏海报
			getWindowBanner() {
				api.getBanner({
					platform: 0,
					position: 1
				}).then(res => {
					this.imageList = res.data;
					if (Array.isArray(res.data) && res.data.length > 0) {
						this.$nextTick(() => {
							this.$refs.poster.open();
						});
					};
				});
			},
			getHomeImage() {
				api.getBanner({
					platform: 0,
					position: 3
				}).then(res => {
					this.homeImage = res.data[0].image
				});
			},
			// 下拉刷新
			downCallback() {
				this.list = [];
				this.mescroll.resetUpScroll()
			},
			/* getList(){
				let _this = this;
				api.getStationList({
					lng: _this.longitude,
					lat: _this.latitude,
					oil_type_id: _this.o_index,
					orderFiled: _this.s_index,
					page: _this.form.page,
					range: _this.d_index
				}).then(res=>{
					if(res.code == 1){
						_this.list = _this.list.concat(res.data.data);
					}
				})
			}, */
			// 轮播海报
			/* getPopupDataApi(){
				let _this = this

				api.getPopupData().then(res =>{
					if(res.code == 1){
						_this.imageList = res.data
					}

				}).catch(()=>{

				})
			}, */
			// 上拉加载
			upCallback(page) {
				let _this = this;
				api.getStationList({
					lng: _this.longitude,
					lat: _this.latitude,
					oil_type_id: _this.o_index,
					orderFiled: _this.s_index,
					page: page.num,
					range: _this.d_index,
					keywords: _this.keyword
				}).then(curPageData => {
					//console.log(curPageData, '=-=-=-==-')
					_this.mescroll.endBySize(curPageData.data.data.length, curPageData.data.total)
					uni.stopPullDownRefresh()
					//设置列表数据
					if (page.num == 1) _this.list = [];
					_this.list = _this.list.concat(curPageData.data.data);

					// _this.$refs.logoPopup.close();
				}).catch(() => {
					this.mescroll.endErr();
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 修改popup 默认层级和背景透明度 */
	/* #ifdef MP-ALIPAY */
	/deep/.uni-popup {
		z-index: 99999 !important;
	}

	::v-deep .mask-popup .uni-popup {
		z-index: 99 !important;
	}

	/deep/.vue-ref {
		background-color: rgba(0, 0, 0, 0.5) !important;
	}

	/* #endif */

	/* #ifndef MP-ALIPAY */
	/deep/.poster .uni-popup {
		z-index: 99999 !important;
	}

	/deep/.poster .vue-ref {
		background-color: rgba(0, 0, 0, 0.5) !important;
	}

	/* #endif */

	::v-deep .u-navbar--fixed {
		z-index: 9999 !important;
	}

	.home {

		position: relative;

		.canvas {
			position: absolute;
			height: 200rpx;
			width: 200rpx;
			opacity: 0;
		}

		.active_text {
			position: fixed;
			top: 74%;
			left: 40rpx;
			z-index: 999;
			font-weight: bold;
			font-size: 36rpx;
			color: #F12F63;
		}

		@keyframes wobble-hor-bottom {

			0%,
			100% {
				transform: translateX(0%);
				transform-origin: 50% 50%;
			}

			15% {
				transform: translateX(-30rpx) rotate(-6deg);
			}

			30% {
				transform: translateX(15rpx) rotate(6deg);
			}

			45% {
				transform: translateX(-15rpx) rotate(-3.6deg);
			}

			60% {
				transform: translateX(10rpx) rotate(2.4deg);
			}

			75% {
				transform: translateX(-6rpx) rotate(-1.2deg);
			}
		}

		.is_fixed {
			position: fixed;
			top: 0;
			z-index: 999;
		}

		.home_search {
			width: 90%;
			margin: 0 auto 20rpx;
		}

		.home-banner {
			height: 280rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			.swiper {
				width: 100%;
				height: 100%;

				.swiper-item {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}

		.active_region {
			.active_contnet {
				width: 92%;
				height: 100%;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					object-fit: cover;
				}
			}
		}

		.check-list {
			width: 100%;
			height: 80rpx;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
			background: #fff;
			border-bottom: 1px solid #efefef;
			z-index: 100;

			.prop {
				width: 750rpx;
				min-height: 120rpx;
				background: #FFFFFF;
				position: absolute;
				top: 83rpx;
				left: 0;

				.distance-box {
					height: 100%;
					padding-top: 20rpx;

					.ab-box {
						width: 140rpx;
						height: 60rpx;
						border: 1px solid #999999;
						border-radius: 10rpx;
						font-size: 28rpx;
						margin-bottom: 20rpx;
					}

					.ab-box2 {
						width: 140rpx;
						height: 60rpx;
					}
				}
			}

			.check-list-in {
				width: 100%;
				height: 80rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				position: relative;

				.check-list-item {
					margin-right: 80rpx;

					view {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #1A1A1A;
						padding-right: 8rpx;
					}

					text {
						font-size: 18rpx;
					}
				}
			}
		}

		.adver {
			padding: 20rpx 0 30rpx 0;

			.adver-item {
				width: 330rpx;
				height: 140rpx;
				background: #F5F7FB;
				border-radius: 20rpx;
				padding-left: 36rpx;
				padding-right: 28rpx;
				box-sizing: border-box;

				// .miniprogram-btn {
				// 	font-size: 28rpx;
				// 	font-family: PingFang SC;
				// 	font-weight: bold;
				// 	color: #323232;
				// }

				text {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #323232;
				}

				image {
					width: 116rpx;
					height: 92rpx;
				}
			}
		}

		// .adver {
		// 	width: 100%;
		// 	padding: 20rpx 0 0 0;
		// 	background-color: #fff;
		// 	border-radius: 30rpx 30rpx 0 0;

		// 	.adver-item {
		// 		display: flex;
		// 		flex-direction: column;
		// 		align-items: center;
		// 		justify-content: space-evenly;
		// 		width: 200rpx;
		// 		height: 160rpx;
		// 		// background: #F5F7FB;
		// 		border-radius: 20rpx;
		// 		// padding-left: 36rpx;
		// 		// padding-right: 28rpx;
		// 		box-sizing: border-box;

		// 		.text {
		// 			font-size: 28rpx;
		// 			font-family: PingFang SC;
		// 			// font-weight: bold;
		// 			color: #323232;
		// 		}

		// 		image {
		// 			width: 62rpx;
		// 			height: 62rpx;
		// 		}
		// 	}
		// }

		// .gay-box {
		// 	width: 100%;
		// 	height: 0rpx;
		// 	background: #fff;
		// 	position: relative;
		// 	z-index: 999;
		// }
		.gay-box {
			width: 100%;
			height: 20rpx;
			background: #F4F4F4;
			position: relative;
			z-index: 100;
		}

		.act-item {
			border: 1px solid #F12F63 !important;
			color: #F12F63;
			background: rgba(241, 47, 99, .1);
		}

		.w-center-p {
			padding: 0 2%;
			background-color: #f4f4f4;
			box-sizing: border-box;
		}
	}

	.share {
		position: relative;

		#shareBtn {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

		button::after {
			border: none;
		}
	}

	.share-bg {
		width: 100%;
		height: 260rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		.share-button {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			font-size: 24rpx;
			color: #666666;
		}

		.share-img {
			width: 70rpx;
			height: 70rpx;
			margin-bottom: 20rpx;
		}

		.share-friend {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.share-roll {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.cancel {
			text-align: center;
			color: #666666;
		}

		#shareBtn {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}

		button::after {
			border: none;
		}
	}

	.share-monney {
		max-width: 100vw;
		max-height: 100vh;
		position: relative;
		overflow: hidden;

		.cans {
			position: absolute;
			left: 105%;
		}

		.share-bg {
			width: 100%;
			height: 1260rpx;
			position: relative;

			.share-img {
				width: 100%;
				height: 100%;
			}

			.ewm-box {
				width: 328rpx;
				height: 374rpx;
				background: #FFFFFF;
				border: 10rpx solid #FAAD1C;
				border-radius: 30rpx;
				background: #fff;
				position: absolute;
				top: 432rpx;
				left: 50%;
				margin-left: -164rpx;
				padding-top: 24rpx;
				box-sizing: border-box;

				.share-title {
					width: 236rpx;
					height: 60rpx;
					background: linear-gradient(180deg, #FCCD14 0%, #FF6724 100%);
					border-radius: 30rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 60rpx;
					text-align: center;
					position: absolute;
					top: -30rpx;
					left: 50%;
					margin-left: -118rpx;
				}

				.ewm {
					width: 248rpx;
					height: 248rpx;
					background: #FFFFFF;
					border: 4rpx solid #DCDCDC;
					border-radius: 20rpx;

					image {
						width: 240rpx;
						height: 240rpx;
					}
				}

				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #922800;
					padding-top: 14rpx;
				}
			}
		}

		.my-share {
			position: relative;
			top: -440rpx;
			background-color: transparent;
			width: 100%;
			// height: 300rpx;
			// background: linear-gradient(180deg, #FFBD6B 0%, #FE6522 100%);
			padding-bottom: 40rpx;

			.w-center {
				.save-local {
					width: 440rpx;
					height: 88rpx;
					background: #FFFFFF;
					margin: 0 auto;
					border-radius: 44rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF6623;
				}

				.my-reward {
					height: 220rpx;
					border-radius: 20rpx;
					background: #fff;
					margin-top: 20rpx;

					.my-reward-title {
						.intro {
							position: absolute;
							right: 7%;
							text-decoration: underline;
							font-size: 28rpx;
							color: dodgerblue;
						}

						height: 74rpx;
						border-bottom: 1px solid #E5E5E5;
						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #232323;

					}

					.share-local-list {
						width: 100%;
						margin: 0 auto;
						padding-top: 20rpx;

						.share-local-item {
							width: 33.33%;
							text-align: center;

							.mm {
								font-size: 40rpx;
								font-family: PingFang SC;
								font-weight: 800;
								color: #001438;

								text {
									font-size: 24rpx;
									font-weight: bold;
								}
							}

							.share-info {
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
								padding-top: 14rpx;
							}

							.turn-btn {
								background-color: #FFBD6B;
								border-radius: 8rpx;
								color: #FFF !important;
								padding: 6rpx 18rpx;
								margin-top: 14rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								width: 120rpx;
								// border: 2rpx solid #;
							}
						}
					}
				}

			}

		}

		.my-mission {
			min-height: 660rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 24rpx;

			.fi-list {
				width: 100%;
				min-height: 500rpx;
				padding: 0 40rpx;
				box-sizing: border-box;

				.laoding-box {
					width: 100%;
					;
					min-height: 500rpx;
				}

				.fi-item {
					width: 100%;
					margin-top: 24rpx;
					padding-bottom: 24rpx;
					border-bottom: 1px solid #EEEEEE;

					.avata-name {
						image {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
						}

						.name {
							padding-left: 20rpx;

							.name-user {
								font-size: 34rpx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #313234;
							}

							text {
								font-size: 20rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #999999;
							}
						}
					}

					.monney {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F12F63;

						text.plus {
							font-size: 44rpx;
							color: #000;
						}

						text.Symbol {
							font-size: 24rpx;
						}
					}
				}
			}

			.paging {
				min-width: 50%;
				max-width: 100%;
				margin: 0 auto;
				padding: 30rpx 0;

				.current-box {
					padding: 0 15rpx;
				}

				.p-btn {
					width: 100rpx;
					height: 60rpx;
					font-size: 28rpx;
					color: #fff;
					background: rgba(255, 120, 50, .7);
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;

				}
			}

			.my-mission-nav {
				height: 86rpx;
				border-bottom: 1px solid #E5E5E5;

				.my-mission-nav-in {
					width: 60%;
					margin: 0 auto;

					view {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: flex-end;
					}

					text {
						font-size: 32rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #888888;
						padding-bottom: 20rpx;
					}

					.my-mission-item {
						.active-color {
							color: #F12F63;
						}

						.active-ft {
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #222222;
						}

						.b-line {
							width: 56rpx;
							height: 8rpx;
							background: #F12F63;
							border-radius: 8rpx;
						}

						// font-size: 34rpx;
						// font-family: PingFang SC;
						// font-weight: bold;
						// color: #222222;
					}
				}

			}

			.os-list {
				width: 100%;
				min-height: 500rpx;

				.no-data {
					width: 100%;
					min-height: 500rpx;

					image {
						width: 141rpx;
						height: 148rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #BEBEBE;
					}
				}
			}
		}


		.load-status-box {
			padding: 30rpx 0;
			text-align: center;
			color: #606266;
			font-size: 28rpx;

			.status-text {
				padding: 0 20rpx;
			}

			.line {
				color: #e6e8eb;
			}
		}
	}

	.button-hover {
		background: rgba(255, 120, 51, .4) !important;
	}

	/* 修改pupop 默认层级和背景透明度 */
	/deep/.model .uni-popup {
		z-index: 99999 !important;
	}

	/deep/.model .vue-ref {
		background-color: rgba(0, 0, 0, 0.4) !important;
	}
</style>
